<template>
  <div class="contrast" v-loading="loading">
    <div class="contrast-one">
      <div class="line contrast-one-title">对比条件</div>
      <div class="contrast-one-content">
        <div>时间跨度 :</div>
        <div style="margin: 0 20px">
          <el-radio-group v-model="data.time_type" size="mini" @input="onType">
            <el-radio label="1">月度</el-radio>
            <el-radio label="2">年度</el-radio>
          </el-radio-group>
        </div>
        <div>
          <el-date-picker
            v-if="data.time_type == 1"
            style="width: 500px"
            size="mini"
            v-model="date"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM"
            @change="changeMonthrange"
          >
          </el-date-picker>
          <year-range
            v-if="data.time_type == 2"
            :yearRange="yearRange"
            :key="`${yearRange[0]}_${yearRange[1]}`"
            @yearChanged="handleYearChanged"
          >
          </year-range>
        </div>
      </div>
      <div class="contrast-one-content">
        <div>对比内容 :</div>
        <div style="margin: 0 20px">
          <el-checkbox-group v-model="data.content_type">
            <el-checkbox
              v-for="(item, index) in cities"
              :key="index"
              :label="item.value"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="contrast-one-content">
        <div>对比工厂 :</div>
        <div style="margin: 0 20px" class="contrast-one-content-list">
          <div
            class="contrast-one-content-list-factory"
            v-for="(item, index) in data.supplier_ids"
            :key="item"
          >
            {{ item | factoryname }}
            <i
              class="el-icon-circle-close pointer"
              @click="onSplice(index)"
            ></i>
          </div>
          <div
            class="contrast-one-content-list-factoryadd pointer"
            @click="onDialogVisible"
          >
            <i class="el-icon-plus"></i>
            添加工厂
          </div>
        </div>
      </div>
      <div>
        <el-button
          type="primary"
          size="default"
          @click="onSearch"
          :disabled="
            !data.str_date ||
            !data.end_date ||
            !data.content_type.length ||
            !data.supplier_ids.length
          "
          >搜索</el-button
        >
      </div>
    </div>
    <div class="contrast-two" v-for="item in data.content_type" :key="item">
      <div class="line contrast-one-title">{{ item | citiesname }}</div>
      <div class="contrast-one-title-charts">
        <div>
          <div :id="item" class="echartsStyle"></div>
        </div>
      </div>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-select
        style="width: 280px"
        multiple
        v-model="factory"
        placeholder="请选择"
        filterable
        clearable
      >
        <el-option
          v-for="item in factoryList"
          :key="item.supplier_id"
          :label="item.factory_name"
          :value="item.supplier_id"
        ></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="!factory"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  postHomeCodeGetFactory,
  postAdminOperategetfactory_total_contrast,
} from "@/api";
import { postponenumall } from "./postponenum.js";
import YearRangePicker from "@/components/YearRangePicker.vue";
let that;
export default {
  components: {
    // 自定义组件标签名称
    "year-range": YearRangePicker,
  },
  filters: {
    factoryname(val) {
      console.log(val);
      let { factoryList } = that;
      let factory = factoryList.find((e) => e.supplier_id == val);
      return factory.factory_name;
    },
    citiesname(val) {
      let { cities } = that;
      let citie = cities.find((e) => e.value == val);
      return citie.label;
    },
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      checkedCities: "",
      date: "",
      yearRange: [],
      factory: "",
      factoryList: [],
      data: {
        time_type: "1",
        str_date: "",
        end_date: "",
        content_type: [],
        supplier_ids: [],
      },
      cities: [
        {
          label: "下单数",
          value: "xiadanshu",
        },
        {
          label: "入库数",
          value: "rukushu",
        },
        {
          label: "应交付数",
          value: "jiafushu",
        },
        {
          label: "应交未付数",
          value: "weifushu",
        },
        {
          label: "应交已付数",
          value: "yifushu",
        },
        {
          label: "QC合格率",
          value: "qc",
        },
        {
          label: "仓检合格率",
          value: "qt",
        },
      ],
    };
  },
  async mounted() {
    that = this;
    await this.postHomeCodeGetFactory();
    let supplier_id = this.$route.query.supplier_id;
    if (supplier_id) {
      let data = this.data;
      data.supplier_ids.push(supplier_id);
      this.data = data;
    }
    this.onType(1);
  },
  methods: {
    onDialogVisible() {
      this.factory = this.data.supplier_ids;
      this.dialogVisible = true;
    },
    onSplice(index) {
      let { supplier_ids } = this.data;
      supplier_ids.splice(index, 1);
      this.data.supplier_ids = supplier_ids;
    },
    onType(e) {
      this.data.str_date = "";
      this.data.end_date = "";
      let date = new Date();
      if (e == 1) {
        let Y = date.getFullYear();
        let M = date.getMonth() + 1;
        if (M < 10) {
          M = "0" + M;
        }
        this.data.str_date = `${Y}-${M}`;
        this.data.end_date = `${Y}-${M}`;
        this.date = [`${Y}-${M}`, `${Y}-${M}`];
      } else {
        let Y = date.getFullYear();
        this.data.str_date = `${Y}`;
        this.data.end_date = `${Y}`;
        this.yearRange = [Y, Y];
      }
    },
    async postAdminOperategetfactory_total_contrast() {
      this.loading = true;
      let { data } = this;
      let res = await postAdminOperategetfactory_total_contrast(data);
      let resdata = res.data;
      data.content_type.forEach(async (e) => {
        await this.postponenum(postponenumall(resdata.date, resdata[e]), e);
      });
      this.loading = false;
    },
    async onSearch() {
      await this.postAdminOperategetfactory_total_contrast();
    },
    onSubmit() {
      let { data, factory } = this;
      data.supplier_ids = factory;
      this.data = data;
      this.factory = "";
      this.dialogVisible = false;
    },
    async postHomeCodeGetFactory() {
      let obj = {
        group: 1,
        page: 1,
        size: 1000,
        status: "0",
        type: "1",
      };
      let res = await postHomeCodeGetFactory(obj);
      this.factoryList = res.data;
    },
    async postponenum(data, id) {
      let myChart = echarts.init(document.getElementById(id));
      // 绘制图表
      myChart.setOption(data,true);
    },
    handleYearChanged(val) {
      this.yearRange = val;
      this.data.str_date = val[0];
      this.data.end_date = val[1];
    },
    changeMonthrange(val) {
      if (val) {
        this.data.str_date = val[0];
        this.data.end_date = val[1];
      } else {
        this.data.str_date = "";
        this.data.end_date = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsStyle {
  width: calc(100% - 40px);
  height: 400px;
  background: #fff;
}
.contrast {
  font-size: 14px;
  .contrast-two {
    border-top: 1px solid #eee;
    background: #fff;
    padding: 20px 10px;
  }
  .contrast-one {
    padding: 20px 10px;
    background: #fff;
    .contrast-one-content {
      display: flex;
      align-items: center;
      margin: 10px 0;
      .contrast-one-content-list {
        display: flex;
        .contrast-one-content-list-factory {
          border: 1px solid #ccc;
          border-radius: 3px;
          padding: 3px 10px;
          font-size: 12px;
          margin-right: 10px;
        }
        .contrast-one-content-list-factoryadd {
          border: 1px dashed #2c70d6;
          border-radius: 3px;
          padding: 3px 10px;
          font-size: 12px;
          color: #2c70d6;
        }
      }
    }
  }
}
</style>